// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item
{
    id:buttommenu
    width: 480
    height: 300

    /////////////////////////////////////////////////////     signals for buttons
    signal menu_up_down()
    signal switch_panel()
    signal my_position_info()
    signal aboutme()
    signal open_setting()
    signal helpme()

    /////////////////////////////////////////////////////    state switch function
    function switch_state()
    {
        buttommenu.state == "" ? buttommenu.state = "search" : buttommenu.state = "";
    }

    //////////////////////////// background
    Rectangle {
        id: rectangl_BG
        anchors.fill: parent
        color: "#00a9af"
//        opacity: 0.700
    }

    /////////////////////////////////////////////////////     left button for menu up and down
    Rectangle {
        id: left_button
        width: 136
        height: 86
        color: "#00000000"
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0

        Rectangle {
            id: rectangle1
            y: 33
            width: 20
            height: 20
            color: "#ffffff"
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.verticalCenter: parent.verticalCenter
        }

        Rectangle {
            id: rectangle2
            x: 0
            y: 38
            width: 20
            height: 20
            color: "#ffffff"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }

        Rectangle {
            id: rectangle3
            x: -6
            y: 34
            width: 20
            height: 20
            color: "#ffffff"
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.verticalCenter: parent.verticalCenter
        }

        MouseArea {
            id: mouse_area5
            anchors.fill: parent

            onClicked:
            {
//                console.log("menu_up_down clicked.........");
                menu_up_down();
            }
        }


    }

    /////////////////////////////////////////////////////     right button for switch panel
    Rectangle {
        id: right_button
        x: 344
        y: 0
        width: 136
        height: 86
        color: "#00000000"
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0

        Item {
            id: arrow
            x: 18
            y: 0
            width: 100
            height: 86
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            Rectangle {
                id: rectangle4
                x: 20
                y: 38
                width: 50
                height: 10
                color: "#ffffff"
                radius: 999
                smooth: true
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }

            Rectangle {
                id: rectangle5
                x: 50
                y: 31
                width: 30
                height: 5
                color: "#ffffff"
                radius: 999
                smooth: true
                rotation: 45
            }

            Rectangle {
                id: rectangle6
                x: 50
                y: 50
                width: 30
                height: 5
                color: "#ffffff"
                radius: 999
                smooth: true
                rotation: -45
            }

            Behavior on rotation {
                PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
            }

        }

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
//                buttommenu.state == "" ? buttommenu.state = "search" : buttommenu.state = "" ;
                switch_panel();
            }
        }
    }

    //////////////////////  just seperate line
    Rectangle {
        id: line
        x: 120
        width: parent.width
        height: 1
        color: "#ffffff"
//        anchors.topMargin: left_button.bottom
        anchors.top: left_button.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }

    /////////////////////////////////////////////////////     functions container
    Item{
        id: functions_container
        width: parent.width
        height: parent.height - left_button.height - line.height
        anchors.top: line.bottom
        Grid {
            id: functions
            x: 0
            y: 87
            width: 420
            height: 144
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            spacing: 20
            rows: 2
            columns: 2

            Mbutton {
                id: setting

                pro_width: 200
                pro_height: 60
                textstring: "地图设置"
                text_size: 30

                onButtonclick:
                {
                    open_setting();
                }
//                Text {
//                    id: text1
//                    x: 75
//                    y: 23
//                    color: "#ffffff"
//                    text: "地图设置"
//                    font.bold: true
//                    horizontalAlignment: Text.AlignLeft
//                    verticalAlignment: Text.AlignTop
//                    anchors.horizontalCenter: parent.horizontalCenter
//                    anchors.verticalCenter: parent.verticalCenter
//                    font.pixelSize: 30
//                }

//                MouseArea {
//                    id: mouse_area1
//                    anchors.fill: parent
//                }
            }

            Mbutton {
                id: myposition

                pro_width: 200
                pro_height: 60
                textstring: "我的位置"
                text_size: 30

                onButtonclick:
                {
                    my_position_info();
                }
//                Text {
//                    id: text2
//                    x: 55
//                    y: 23
//                    color: "#ffffff"
//                    text: "我的位置"
//                    anchors.horizontalCenter: parent.horizontalCenter
//                    anchors.verticalCenter: parent.verticalCenter
//                    font.bold: true
//                    font.pixelSize: 30
//                }

//                MouseArea {
//                    id: mouse_area2
//                    anchors.fill: parent

//                    onClicked:
//                    {
//                        my_position_info();
//                    }
//                }
            }

            Mbutton {
                id: help

                width: 200
                height: 60
                textstring: "使用帮助"
                text_size: 30

                onButtonclick:
                {
                    helpme();
                }

//                Text {
//                    id: text3
//                    x: 75
//                    y: 23
//                    color: "#ffffff"
//                    text: "使用帮助"
//                    font.pixelSize: 30
//                    anchors.horizontalCenter: parent.horizontalCenter
//                    anchors.verticalCenter: parent.verticalCenter
//                    font.bold: true
//                    horizontalAlignment: Text.AlignLeft
//                    verticalAlignment: Text.AlignTop
//                }

//                MouseArea {
//                    id: mouse_area3
//                    anchors.fill: parent
//                }
            }

            Mbutton {
                id: about

                pro_width: 200
                pro_height: 60
                textstring: "关于AesyPig"
                text_size: 30
                opacity: 1

                onButtonclick:
                {
                    aboutme();
                }
//                Text {
//                    id: text4
//                    x: 75
//                    y: 23
//                    color: "#ffffff"
//                    text: "关于AesyPig"
//                    font.pixelSize: 30
//                    anchors.horizontalCenter: parent.horizontalCenter
//                    anchors.verticalCenter: parent.verticalCenter
//                    font.bold: true
//                    horizontalAlignment: Text.AlignLeft
//                    verticalAlignment: Text.AlignTop
//                }

//                MouseArea {
//                    id: mouse_area4
//                    enabled: false
//                    anchors.fill: parent
//                }
            }
        }
    }



    //////////////////////
    ///////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////  states
    states: [
        State {
            name: "search"

            PropertyChanges {
                target: arrow
                rotation: 180
            }

            PropertyChanges {
                target: about
                opacity: 1
            }

//            PropertyChanges {
//                target: mouse_area4
//                enabled: true
//            }

            PropertyChanges {
                target: help
                opacity: 1
            }

            PropertyChanges {
                target: myposition
                opacity: 1
            }

            PropertyChanges {
                target: setting
                isEnable: false
                opacity: 0.300
            }

//            PropertyChanges {
//                target: mouse_area1
//                enabled: false
//            }

//            PropertyChanges {
//                target: mouse_area2
//                enabled: false
//            }

//            PropertyChanges {
//                target: mouse_area3
//                enabled: false
//            }
        }
    ]
}
